﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
    <div id="app-1">
        <h1>体验vue的路由，vue-router</h1>
        <p>
            <!--使用router-link组建来导航-->
            <!--通过传入to属性指定链接-->
            <!--<router-link>默认会被渲染成要一个<a>标签-->
            <router-link to="/foo">跳转至Foo</router-link>
            <router-link to="/bar">跳转至Bar</router-link>
            <router-link to="/user/hehe">跳转至User</router-link>
        </p>
        <!--路由出口-->
        <!--路由匹配到的组件将渲染在这里-->
        <router-view></router-view>
    </div>
    <script>
        //Start【动态路由】
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
        // 1. 定义 (路由) 组件。
        // 可以从其他文件 import 进来
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }

        //当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
        const User = { template: '<div>user{{$route.params.id}}</div>' }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由。
        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar },
            { path: '/user/:id', component: User }
        ]
        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
            routes // (缩写) 相当于 routes: routes
        })


        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
            router,
            watch: {
                '$route'(to, from) {
                    console.log("to:" + to + "→" + "from" + from)
                    console.log(to)
                    console.log(from)
                }
            },
            //同watch 一样的功能
            beforeRouteUpdate(to, from, next) {

            }
        }).$mount('#app-1')

        //--------------- 现在，应用已经启动了！--------------------------------


        //常规参数只会匹配被 / 分隔的 URL 片段中的字符。
        //如果想匹配任意路径，我们可以使用通配符(*)
        /**********
         *
         * 当使用通配符路由时，请确保路由的顺序是正确的，
         *
         * 也就是说含有通配符的路由应该放在最后。
         *
         * 路由 { path: '*' } 通常用于客户端 404 错误。
         *
         * 如果你使用了History 模式，请确保正确配置你的服务器。
         *
         * 当使用一个通配符时，
         *
         * $route.params 内会自动添加一个名为 【pathMatch】 参数。
         *
         * 它包含了 URL 通过通配符被匹配的部分：
         *
         * // 给出一个路由 { path: '/user-*' }
            this.$router.push('/user-admin')
            this.$route.params.pathMatch // 'admin'


            // 给出一个路由 { path: '*' }
            this.$router.push('/non-existing')
            this.$route.params.pathMatch // '/non-existing'

         *
         * *********/

        /*
         *
         * 用 Vue.js + Vue Router 创建单页应用，是非常简单的。
         *
         * 使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，
         *
         * 当你要把 Vue Router 添加进来，我们需要做的是，
         *
         * 将组件 (components) 映射到路由 (routes)，
         *
         * 然后告诉 Vue Router 在哪里渲染它们。
         *
         *
         *
         *
         *
         *
         * */
        //const NotFound = { template: '<p>Page not found</p>' }
        //const Home = { template: '<p>home page</p>' }
        //const About = { template: '<p>about page</p>' }

        ////定义路由表
        //const routes = {
        //    '/': Home,
        //    '/about': About
        //}

        //var app1 = new Vue({
        //    el: '#app-1',
        //    data: {
        //        currentRoute: window.location.pathname
        //    },
        //    computed: {
        //        ViewComponent() {
        //            return routes[this.currentRoute] || NotFound
        //        }
        //    },
        //    render(h) {
        //        return h(this.ViewComponent)
        //    }
        //})

        /*
         * 提醒一下，当使用路由参数时，
         *
         * 例如从 /user/foo 导航到 /user/bar，
         *
         * 原来的组件实例会被复用。
         *
         * 因为两个路由都渲染同个组件，
         *
         * 比起销毁再创建，复用则显得更加高效。
         *
         * 不过，这也意味着【组件的生命周期钩子不会再被调用】
         *
         * 。*/

         //End【动态路由】

        //start【嵌套路由】

    </script>

    <div id="app-2">
        <router-view></router-view>
    </div>
    <script>
        const Userapp = {
            template: '<div>User {{ $route.params.id }}</div>'
        }

        const routerapp = new VueRouter({
            routes: [
                { path: '/user/:id', component: Userapp }
            ]
        })

        const app2 = new Vue({
            routerapp,
            watch: {
                '$route'(to, from) {
                    console.log("to:" + to + "→" + "from" + from)
                    console.log(to)
                    console.log(from)
                }
            },
            //同watch 一样的功能
            beforeRouteUpdate(to, from, next) {

            }
        }).$mount('#app-2')
    </script>
</body>
</html>